<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员进出记录</title>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --secondary-bg: #252525;
            --text-primary: #ffffff;
            --text-secondary: #b3b3b3;
            --accent-color: #bb86fc;
            --success-color: #4CAF50;
            --error-color: #f44336;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-primary);
            padding: 20px;
            min-height: 100vh;
        }

        .records-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--secondary-bg);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .records-list {
            list-style: none;
            max-height: 600px;
            overflow-y: auto;
            padding-right: 10px;
        }

        .records-list::-webkit-scrollbar {
            width: 8px;
        }

        .records-list::-webkit-scrollbar-track {
            background: var(--primary-bg);
            border-radius: 4px;
        }

        .records-list::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .records-list::-webkit-scrollbar-thumb:hover {
            background: var(--accent-color);
            opacity: 0.8;
        }

        .record-item {
            background: rgba(187, 134, 252, 0.08);
            margin: 10px 0;
            padding: 15px 20px;
            border-radius: 10px;
            border-left: 4px solid var(--accent-color);
            transform: translateY(-100%);
            opacity: 0;
            animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform, opacity, background-color;
        }

        .record-item:hover {
            transform: translateY(0) scale(1.02);
            background: rgba(187, 134, 252, 0.12);
            box-shadow: 0 4px 12px rgba(187, 134, 252, 0.15);
        }

        @keyframes slideDown {
            0% {
                transform: translateY(-100%);
                opacity: 0;
            }
            60% {
                transform: translateY(10%);
                opacity: 0.8;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .record-item .time {
            color: var(--accent-color);
            font-size: 0.9em;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .record-item:hover .time {
            color: #d4b3ff;
        }

        .record-item .name {
            margin-left: 10px;
            font-weight: 500;
            transition: transform 0.3s ease;
        }

        .record-item:hover .name {
            transform: translateX(2px);
        }

        .record-item .direction {
            margin-left: 10px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .direction.in {
            background-color: rgba(76, 175, 80, 0.2);
            color: var(--success-color);
        }

        .direction.out {
            background-color: rgba(244, 67, 54, 0.2);
            color: var(--error-color);
        }

        .record-item:hover .direction.in {
            background-color: rgba(76, 175, 80, 0.3);
            transform: scale(1.05);
        }

        .record-item:hover .direction.out {
            background-color: rgba(244, 67, 54, 0.3);
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="records-container">
        <ul class="records-list" id="recordsList">
        </ul>
    </div>

    <script>
        const recordsList = document.getElementById('recordsList');
        
        // 模拟数据生成
        function generateRandomRecord() {
            const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八'];
            const directions = ['进入', '离开'];
            
            return {
                name: names[Math.floor(Math.random() * names.length)],
                direction: directions[Math.floor(Math.random() * directions.length)],
                time: new Date().toLocaleTimeString()
            };
        }

        // 添加新记录
        function addNewRecord() {
            const record = generateRandomRecord();
            const li = document.createElement('li');
            li.className = 'record-item';
            li.innerHTML = `
                <span class="time">${record.time}</span>
                <span class="name">${record.name}</span>
                <span class="direction ${record.direction === '进入' ? 'in' : 'out'}">${record.direction}</span>
            `;
            
            recordsList.insertBefore(li, recordsList.firstChild);

            // 控制列表最大显示数量
            if (recordsList.children.length > 50) {
                const lastChild = recordsList.lastChild;
                lastChild.style.opacity = '0';
                lastChild.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    recordsList.removeChild(lastChild);
                }, 300);
            }
        }

        // 定期添加新记录
        setInterval(addNewRecord, 3000);

        // 初始添加一些记录
        for (let i = 0; i < 10; i++) {
            addNewRecord();
        }
    </script>
</body>
</html>
